import React, {useEffect, useRef} from 'react';
import useDidMount from '../hooks/useDidMount';
import echarts from 'echarts';

const ReactEcharts = props => {

  const container = useRef(null);
  const chart = useRef(null);
  const {option} = props;

  useDidMount(() => {
    chart.current = echarts.init(container.current, props.theme);
  });

  // 监听 option 变化
  useEffect(() => {
    chart.current && chart.current.setOption(option);
  }, [option]);

  return (
    <div style={{
      width: props.width || 100,
      height: props.height || 100,
    }} ref={container}/>
  );
};

export default ReactEcharts;